<template>
  <el-container class="car_list">
    <el-main class="main">
      <el-table :data="tableData" style="width: 100%" height="520" id="carTable">
        <el-table-column fixed prop="productName" label="商品名" width="150">
        </el-table-column>
        <el-table-column prop="productPicture" label="图片" width="120">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px; text-align: center; max-height: 90px"  :src="scope.row.productPicture"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="单价" width="120">
        </el-table-column>
        <el-table-column prop="count" label="数量" width="120">
        </el-table-column>
        <el-table-column prop="money" label="金额" width="120">
        </el-table-column>
        <el-table-column prop="choose" label="选择" width="100">
          <template slot-scope="scope">
            <el-checkbox :checked="tableData.choose" @change="handleChoose(scope.$index,scope.row)">选择</el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="isDelete" label="删除" width="100" style="text-align: center">
          <template slot-scope="scope">
            <el-button type="danger" @click="handleDel(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer class="footer">
      <div align="right">
        <el-checkbox v-bind:checked="checked" @change="handleAllChoose()">我全要</el-checkbox>
      </div>
      <div align="right">
        <span>
          合计  ：￥{{total_money}}
        </span>
        <span>
          <el-button type="primary" @click="settle()">结算</el-button>
        </span>
      </div>
    </el-footer>

    <el-dialog title :visible.sync="dialogFormVisible">
      <el-form ref="orderFormRef" :model="orderForm" label-width="80px" size="mini">
        <el-form-item label="收货地址">
          <el-radio-group size="medium" v-model="orderForm.address_id">
            <el-radio
              :label="address.id"
              border
              v-for="address in addressList"
              :key="address.id"
            >{{ address.name }} {{ address.phone }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>

  </el-container>
</template>

<script>
export default {
  name: "car",
  data() {
    return {

      dialogFormVisible: false,addressList: [],
      orderForm: {
        address_id: 0,
        product_id: 0
      },
      commentList: [],

      value: false,
      total_money : 0,
      checked:false,
      tableData: [],
      multipleSelection: [],
    }
  },
  mounted(){
    this.getCarList()
  },
  methods:{
    handleChoose(index,row){
      row.choose = !row.choose;
      if(row.choose == true){
        this.total_money += row.money
      }else{
        this.total_money -= row.money
      }
    },

    async handleDel(index,row){
      this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const { data: res } = await this.$http.post(
            "/car/deleteCarProduct",
            row
          );
          if (res.code == 200) {
            this.tableData.splice(index, 1);

            this.$message({
              type: "success",
              message: "删除成功!"
            });
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async settle(){
      this.dialogFormVisible = true;
      const { data: res } = await this.$http.get("user/getMyAddress/1");
      if (res.code == 200) {
        this.addressList = res.data.userAddress;
        // console.log(res);
      }
    },
    onSubmit(){

      this.$confirm("共花费 "+this.total_money+" 元！", "提示", {
        confirmButtonText: "支付",
        cancelButtonText: "取消",
        type: "info"
      })
        .then(async () => {
          const { data: res } = await this.$http.post(
            "/car/settle",
            {tableData : JSON.stringify(this.tableData),addressId : this.orderForm.address_id}
            // JSON.stringify(this.tableData)
            // this.tableData
          );
          if (res.code == 200) {
            this.$message.success({
              type: "success",
              message: "支付成功!"
            });
            await this.getCarList();
            this.total_money = 0;
            this.dialogFormVisible = false;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "支付失败!"
          });
        });
    },

    handleAllChoose(){
      this.total_money = 0
      this.checked = !this.checked;
      if(this.checked == true){
        for(let i=0 ;i<=this.tableData.length ;i++){
          this.total_money += this.tableData[i].money
          this.tableData[i].choose = true
        }
      }else{
        this.total_money = 0
        for(let i=0 ;i<=this.tableData.length ;i++){
          this.tableData[i].choose = false
        }

      }

      // this.$notify({
      //   message: JSON.stringify(this.tableData),
      //   type: "success"})
    },

    async getCarList() {
      const { data: res } = await this.$http.post(
        "/car/carList"
      );
      if (res.code == 200) {
        this.tableData = res.data.tableData;
      } else {
        this.$message({
          type: "info",
          message: "获取列表失败"
        });
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  }
}
</script>

<style lang="less" scoped>
.car_list {
  width: 60%;
  margin: auto;
  position: relative;
  top: -10px;
}
.main {
  background-color: #e7e7e7;
}

.footer {
  background-color: #bfbfbf;
}
/deep/.el-table .cell{
  text-align: center;
}
/deep/.el-image__inner {
  vertical-align: top;
  max-height: 90px;
}
</style>
